<template>
  <div style="width: 300px;height: 160px; position: relative;margin: 15px;">
    <div style="width: 300px;height: 120px;">
      <label class="ant-form-item-required">字典项中文名称</label>
      <a-input placeholder="字典项名称" v-model="newObject.itemName" />
      <div style="height: 10px;"></div>
      <label class="ant-form-item-required">字典项数字编码</label>
      <a-input placeholder="字典项编码" v-model="newObject.itemValue" />
    </div>
    <div style="text-align: right; width:100%; margin-top: 8px;">
      <a-button style="margin-left: 3px;" type="primary" @click="doConfirm">确定：添加</a-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          itemName: '',
          itemValue: '',
        }
      }
    },
    visible: Boolean,
  },
  data() {
    return {
      newObject: this.value,
    }
  },
  computed: {
  },
  mounted() {
    this.init()
  },
  watch: {
    value() {
      // this.init()
    },
    visible() {
      this.reset()
    },
  },
  methods: {
    reset() {
      this.newObject = {
        itemName: '',
        itemValue: '',
      }
    },
    init() {
      this.newObject = this.value
    },
    doConfirm() {
      if (!this.newObject.itemName || this.newObject.itemName.length == 0) {
        this.$message.error('字典项中文名称必填！')
        return
      }
      if (!this.newObject.itemValue || this.newObject.itemValue.length == 0) {
        this.$message.error('字典项数字编码必填！')
        return
      }
      this.newObject.name = this.newObject.itemName + '(' + this.newObject.itemValue + ')'
      this.$emit('onConfirm', this.newObject)
      this.reset()
    },
    doCancel() {
      this.$emit('onCancel')
    }
  }
}
</script>
